<!DOCTYPE HTML PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ include file="/common/taglibs.jsp"%>
<%
response.setHeader("Cache-Control","no-cache"); // HTTP 1.1
response.setHeader("Pragma","no-cache"); // HTTP 1.0
response.setHeader("Cache-Control", "no-cache,no-store,must-revalidate");
response.setDateHeader ("Expires", -1); // Prevents caching at the proxy server
%>

<title><fmt:message key="approve3.title"/></title>
<spring:bind path="associatorView.*">
    <c:if test="${not empty status.errorMessages}">
    <div class="error">
        <c:forEach var="error" items="${status.errorMessages}">
            <img src="<c:url value="/images/iconWarning.gif"/>"
                alt="<fmt:message key="icon.warning"/>" class="icon"/>
            <c:out value="${error}" escapeXml="false"/><br />
        </c:forEach>
    </div>
    </c:if>
</spring:bind>
<c:set var="buttons">
    <input type="submit" class="button" name="_target3" value="<fmt:message key="button.submit.google"/>"/>
    <input type="submit" class="button" name="_target0" value="<fmt:message key="button.step1"/>"/>
    <input type="submit" class="button" name="_target1" value="<fmt:message key="button.back"/>"/>
    <input type="submit" class="button" name="_target3" value="<fmt:message key="button.submit.new.establishment"/>"/>
    <input type="submit" class="button" name="_cancel" value="<fmt:message key="button.cancel"/>"/>
</c:set>
<!--  -->
 <head>
  <title>WEMS Business Search</title>
  <style>
   #resultAddressDiv { height: 150px; width: 300px; margin:50px; padding: 5px; border: 1px solid #676767;}
   .gsmsc-mapDiv { display: none; }
  </style>
	
  <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
  </script>
  <script type="text/javascript">
   _uacct = "UA-2088380-2";
   urchinTracker();
  </script>
  <script type=text/javascript language=javascript src=/site/master.js></script>
  <link rel=stylesheet type=text/css href=/site/master.css>
  <script type=text/javascript language=javascript src=/site/master.js></script>
 </head>

 <body>

 <div id=container>

    <div id=center>
    <div class=title><b>WEMS Google Search</b></div>
    <label><fmt:message key="approve3.text"/></label><br><br>
<!-- ++Begin Map Search Control Wizard Generated Code++ -->
  <!--
  // Created with a Google AJAX Search Wizard
  // http://code.google.com/apis/ajaxsearch/wizards.html
  -->

  <!--
  // The Following div element will end up holding the map search control.
  // You can place this anywhere on your page
  -->
<table border="1" width="100%">
  <tr><td bgcolor="#eeeddd">
  <div id="mapsearch">
    <span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
  </div>
  <script src="http://maps.google.com/maps?file=api&v=2&key=<fmt:message key="google.key.tomcat"/>"
    type="text/javascript"></script>
  <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-msw&key=<fmt:message key="google.key.tomcat"/>"
    type="text/javascript"></script>
  <style type="text/css">
    @import url("http://www.google.com/uds/css/gsearch.css");
  </style>

  <!-- Map Search Control and Stylesheet -->

  <script type="text/javascript">
    window._uds_msw_donotrepair = true;
  </script>
  <script src="http://www.google.com/uds/solutions/mapsearch/gsmapsearch.js?mode=new"
    type="text/javascript"></script>
</td><td valign="top" bgcolor="#eeeddd">
<!-- begin initial business table -->
<table border="0">
	<tr>
		<td colspan="2"><b><fmt:message key="approve1.business.details"/></b>
		</td>
	</tr>
	<tr>
		<td colspan="2">&nbsp;</td>
	</tr>
	<tr>
		<td align="left">
		<label><b><fmt:message key="business.name"/>:</b></label>
		</td>
		<td>
		<c:out value="${initialBusiness.business.businessName}"></c:out>
		</td>
	</tr>
	<tr>
		<td align="left">
		<label><b><fmt:message key="business.type"/>:</b></label>
		</td>
		<td>	
		<c:out value="${initialBusiness.business.businessCatLkp.type}"></c:out>
		</td>
	</tr>
	<tr>			
		<td align="left">
		<label><b><fmt:message key="business.address"/>:</b></label>
		</td>
		<td>
		<c:out value="${initialBusiness.business.businessAddress1}"></c:out>
		</td>
	</tr>
	<tr>		
		<td align="left">
		<label><b><fmt:message key="business.address2"/>:</b></label>
		</td>
		<td>
		<c:out value="${initialBusiness.business.businessAddress2}"></c:out>
		</td>
	</tr>
	<tr>		
		<td align="left">
		<label><b><fmt:message key="business.city"/>:</b></label>
		</td>
		<td>
		<c:out value="${initialBusiness.business.businessCity}"></c:out>
		</td>
	</tr>
	<tr>		
		<td align="left">
		<label><b><fmt:message key="business.zip"/>:</b></label>
		</td>
		<td>
		<c:out value="${initialBusiness.business.businessZip}"></c:out>
		</td>
	</tr>
	<tr>		
		<td align="left">
	    <label><b><fmt:message key="business.phone"/>:</b></label>
	    </td>
	    <td>    
	    <c:out value="${initialBusiness.business.businessPhone}"></c:out>
	    <c:if test="${not empty initialBusiness.business.businessPhoneExt}">
	    Ext.&nbsp;<c:out value="${initialBusiness.business.businessPhoneExt}"></c:out>
	    </c:if>
		</td>
	</tr>
	<tr>		
		<td align="left">
		<label><b><fmt:message key="business.county"/>:</b></label>
		</td>
		<td>
		<c:out value="${initialBusiness.business.countyLkp.name}"></c:out>
		</td>
	</tr>
	<tr>		
		<td align="left">
	    <label><b><fmt:message key="complaint.submitted.date"/>:</b></label>
	    </td>
	    <td>    
	    <c:catch var="e">
	    <fmt:formatDate value="${initialcomplaint.complaintDate}" pattern="MM/dd/yyyy" var="formatted"/>    
	    <c:out value="${formatted}"></c:out>
	    </c:catch>
		</td>
	</tr>
	<tr>		
		<td align="left">
	    <label><b><fmt:message key="approve1.complaint.text"/>:</b></label>
	    </td>
	    <td bgcolor="#FFFFFF" height="20" colspan="3">
	    <c:out value="${initialcomplaint.complaintText}"></c:out>
		</td>
	</tr> 
</table>
<!-- end initial business table -->
</td></tr></table>    
  <style type="text/css">
    @import url("http://www.google.com/uds/solutions/mapsearch/gsmapsearch.css");
  </style>
  <style type="text/css">
    .gsmsc-mapDiv {
      height : 275px;
    }

    .gsmsc-idleMapDiv {
      height : 275px;
    }

    #mapsearch {
      width : 365px;
      margin: 10px;
      padding: 4px;
    }
  </style>
  
<script type="text/javascript">

	function formatPhone(iForm){
		var form = iForm.form;
	    var businessPhoneString = form.businessPhone.value;
	    //look in global.js for stripAndFormat() function
	    var phone=stripAndFormat(businessPhoneString);
	    if(phone != null){
	    	form.businessPhone.value = phone;
	    	return true;
	    }
	    else {
	    	return false;
	    }
	}

    // added by pchapman
    function param(n) {
            var r = new RegExp('[\\?&]'+encodeURIComponent(n)+'=([^&#]*)');
            var url = window.location.href;
            var p = r.exec(url);
            if (p != null) for (var i=1;i<p.length;i++) p[i] = decodeURIComponent(p[i]);
            if (p == null) return undefined;
            else if (p.length > 2) return p.slice(1);
            else return p[1];
            }
    var mySearch;
    // end added by pchapman

GSmapSearchControl.prototype.buildContainerGuts = function() {
  // build out the map divs and search form

  GSmapsc_removeChildren(this.root);
  this.appContainer = GSmapsc_createDiv(null, "gsmsc-appContainer");

  this.resultsList = null;

  // active map div
  this.mapDiv = GSmapsc_createDiv(null, "gsmsc-mapDiv");
  this.appContainer.appendChild(this.mapDiv);

  this.attributionDiv = GSmapsc_createDiv(null, "gsmsc-attributionDiv");
  this.appContainer.appendChild(this.attributionDiv);

  // idle map div
  this.idleMapDiv = GSmapsc_createDiv(null, "gsmsc-idleMapDiv");
  this.appContainer.appendChild(this.idleMapDiv);

  var div = GSmapsc_createDiv(null, "gsmsc-controls");
  this.searchForm = new GSearchForm(false, div);

  // controls
  this.prevNext = GSmapsc_createDiv(null, "gsmsc-prevNext");
  this.prev = GSmapsc_createDiv(null, "gsmsc-prev");
  this.cancel = GSmapsc_createDiv(null, "gsmsc-cancel");
  this.next = GSmapsc_createDiv(null, "gsmsc-next");
  this.tooltip = GSmapsc_createDiv(GSearch.strings["scroll-results"],
                                   "gsmsc-tooltip");
  this.prev.innerHTML = "&nbsp;";
  this.cancel.innerHTML = "&nbsp;";
  this.next.innerHTML = "&nbsp;";
  this.prev.title = GSearch.strings["previous"];
  this.cancel.title = GSearch.strings["clear-results"];
  this.next.title = GSearch.strings["next"];
  this.prevNext.appendChild(this.prev);
  this.prevNext.appendChild(this.cancel);
  this.prevNext.appendChild(this.next);
  this.prevNext.appendChild(this.tooltip);
  this.searchForm.userDefinedCell.appendChild(this.prevNext);

  this.appContainer.appendChild(div);

  this.root.appendChild(this.appContainer);
  this.enableActiveZoomControl=1;
}

    function LoadMapSearchControl() {

      var options = {
            zoomControl : 0,
            idleMapZoom : GSmapSearchControl.ACTIVE_MAP_ZOOM-2,
            activeMapZoom : GSmapSearchControl.ACTIVE_MAP_ZOOM-2, // added by pchapman
            mapTypeControl : GSmapSearchControl.MAP_TYPE_ENABLE_ALL, // added by pchapman
            showResultList : true,
            hotspots : true,
            onBootComplete : function() {
                           this.gmap.setMapType(G_NORMAL_MAP);
                           this.idleGmap.setMapType(G_NORMAL_MAP);
                           this.gmap.addControl(new GOverviewMapControl());
                           this.idleGmap.addControl(new GOverviewMapControl());
                           this.mapCenterHtml.innerHTML = this.mapCenterHtml.innerHTML.replace(/(<div class=\"gs-directions\">)/i,'<div class=latlng>'+this.mapCenter.lat()+', '+this.mapCenter.lng()+"</div>$1");
                           this.onCenterClick();
                           this.onIdleCenterClick();
            }

            }

      mySearch = new GSmapSearchControl( // added by pchapman
            document.getElementById("mapsearch"),
            ((param('q')) ? param('q') : "<c:out value='${initialBusiness.business.businessCity}'></c:out>, OR"), // This line should default to user's county?
            options
            );

    }
    // arrange for this function to be called during body.onload
    // event processing
    GSearch.setOnLoadCallback(LoadMapSearchControl);
  
      // added by pchapman
      GSmapSearchControl.prototype.newSearch = function(opt_query) {
            if (opt_query) {
                  this.searchForm.input.value = opt_query;
            }
            if (this.searchForm.input.value) {
                  // clear markers, set prev/next
                  this.clearMarkers();
                  GSmapsc_removeChildren(this.attributionDiv);
                  // added by pchapman
                  var i = this.searchForm.input.value;
                  var searchType = 'Normal';
                  // end added by pchapman
                  this.gs.execute(i);
            }
            return false;
      }
      GSmapSearchControl.prototype.selectMarker = function(index) {
            //clear info window and reset icon on current marker
            this.gmap.closeInfoWindow();
            var icon = this.unselectedIcon;
            if (this.letteredIconMode) {
                  icon = this.letteredIcons[this.currentResultIndex];
            }
            this.markers[this.currentResultIndex].setMarker(icon);
            //if we have a results list, clear selected
            if (this.markers[this.currentResultIndex].resultsListItem) {
                  GSmapsc_cssSetClass(this.markers[this.currentResultIndex].resultsListItem,'gsmsc-result-list-item');
            }
            //snap to current
            this.currentResultIndex = index;
            //light up current
            var result = this.markers[this.currentResultIndex];
            if (result.resultsListItem) {
                  GSmapsc_cssSetClass(result.resultsListItem,'gsmsc-result-list-item gsmsc-selected');
            }
            var icon = this.selectedIcon;
            if (this.letteredIconMode) {
                  icon = this.letteredIcons[this.currentResultIndex];
            }
            result.setMarker(icon);
            result.marker.openInfoWindow(result.getHtml(), {maxWidth:200});

            // Here's where we send it to the div element - added by pchapman.
            document.getElementById('resultAddressDiv').innerHTML = result.getHtml().innerHTML;

            // Send it out to the form elements.
            var n = document.getElementById('businessName');
            var a = document.getElementById('businessAddress1');
            var c = document.getElementById('businessCity');
            var s = document.getElementById('businessState');
            var p = document.getElementById('businessPhone');
            var z = document.getElementById('businessZip');
            var x = this.gs.results[this.currentResultIndex];
            n.value = x.titleNoFormatting;
            a.value = x.streetAddress;
            c.value = x.city;
            s.value = x.region;
            p.value = x.phoneNumbers[0].number;
            for (var i=1;i<x.phoneNumbers;i++) p.value += '; '+x.phoneNumbers[i].type+': '+x.phoneNumbers[i].number;
			z.value = x.PostalCodeNumber;
            // Stopped adding code here.

            // set scroller
            if (index == 0) {
                  GSmapsc_cssSetClass(this.prev,'gsmsc-prev gsmsc-prev-idle');
            } else {
                  GSmapsc_cssSetClass(this.prev, 'gsmsc-prev gsmsc-prev-active');
            }
            if (index == this.markers.length - 1) {
                  GSmapsc_cssSetClass(this.next,'gsmsc-next gsmsc-next-idle');
            } else {
                  GSmapsc_cssSetClass(this.next,'gsmsc-next gsmsc-next-active');
            }
    }
GSmapSearchControl.prototype.addCustomMarker = function(marker)
 {
 this.gmap.addOverlay(marker);
 this.idleGmap.addOverlay(marker);
 }
 
GSmapscLocalResult.prototype.setMarker = function(i) {
  if (this.marker) {
    this.gsmsc.gmap.removeOverlay(this.marker);
    this.marker.__ls__ = null;
    var marker = this.marker;
    this.marker = null;
    delete(marker);
  }
  this.marker = new GMarker(this.latLng, {icon:i,draggable:true});
  this.marker.__ls__ = this;
  this.gsmsc.gmap.addOverlay(this.marker);
}
    // end added by pchapman

</script>
	<div class=title><b>Usage:</b> <br>1.) Enter search criteria above (example: starbucks portland or), then select SEARCH</div>
	<div class=title>2.) Click on link to select (and load) desired business.</div>
	<div class=title>3.) Click on 'Use Selected Business' to continue.</div>
<!-- ++End Map Search Control Wizard Generated Code++ -->
<form:form name="actionItems" commandName="associatorView" method="post" action="/wems/associateComplaint2.wems?tab=pendingComplaints" onsubmit="return validateBusiness(this)">
<input type="hidden" name="page" value="2" />
  <table border="0">
   <tr><td>Business:</td><td><input id="businessName" name="businessName" type="text"></td></tr>
   <tr><td>Address:</td><td><input id="businessAddress1" name="businessAddress1" type="text"></td></tr>
   <tr><td>City:</td><td><input id="businessCity" name="businessCity" type="text"></td></tr>
   <tr><td>State:</td><td><input id="businessState" name="businessState" type="text"></td></tr>
   <tr><td>Phone:</td><td><input id="businessPhone" name="businessPhone" type="text" maxlength="13" onblur="return formatPhone(this);"></td></tr>
  </table>

<table border="0">
<tr>
	<td class="buttonBar" colspan="2" align="center">
    <c:out value="${buttons}" escapeXml="false"/>
	</td>
</tr>
</table>	
  </form:form>
<div id="resultAddressDiv" class="hidden"></div>

    </div>
  </div>
  </body>